<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <!--[if lt IE 9]>
    <script src="../js/jquery-1.11.3.js"></script>
    
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="../js/jquery-3.1.1.js"></script>
<!--<![endif]-->
<script>
$(document).ready(function(){
  $(document).mousemove(function(event){ 
    $("span").text("X: " + event.pageX + ", Y: " + event.pageY); 
  });
  
  $("div,p").mouseenter(function(event){
   	try{
    $("#msg").html("关联的目标为: " + event.relatedTarget+
    " <br>通过 " + event.target.nodeName + " 元素触发。"+
    "<br>触发时间"+event.timeStamp+
    "<br>触发类型"+event.type+
    "<br>触发键盘或鼠标按键"+event.which+
    "<br>触发 metaKey"+event.metaKey
    );
   } catch(err){    	
    }
  });
  
  
$("#div4").hover(function(){
    $("#div4 p").css("background-color","yellow");
},function(){
    $("#div4 p").css("background-color","pink");
});

 $("#up1").mouseenter(function(){
    $("#up1").css("background-color","yellow");
  });
  $("#up1").mouseleave(function(){
    $("#up1").css("background-color","lightgray");
  });
  
  $("#up2").mouseover(function(){
    $(this).css("background-color","yellow");
  });
  $("#up2").mouseout(function(){
    $(this).css("background-color","lightgray");
  });
  
 $("#div5").mouseup(function(){
    $("#div5 div").html("<p style='color:green;'>释放鼠标按钮。</p>");
  });
  $("#div5").mousedown(function(){
    $("#div5 div").html("<p style='color:purple;'>按下鼠标按钮。</p>");
  });
	$( "#target" ).contextmenu(function() {
		alert( "处理程序.contextmenu()被调用。" );
	});
});
</script>

	</head>
	<body>
	<p>鼠标指针在: <span></span></p>	


<div style="height:30px;border:solid">这是一个 div 元素 
<p style="background-color:pink">这是一个段落</p>
</div><br>

<div id="msg" ></div>

​<div id="div4" style="border: 1px solid black;padding:10px;">
	<p >鼠标悬停时</p>
	</div>

<div id="div5" style="height:30px;border:solid">
在这个 div 元素中按下和释放鼠标按钮
	<div>	</div>
</div><br>
	<p id="up1">鼠标悬停时</p>
	<p id="up2">鼠标悬停时</p>
		
			
<div id="target" style="height:30px;border:solid">
	右键单击这里
</div>
	</body>
</html>
